<template>
  <div>
    <a-modal title="提示" :visible="visible" :footer="false" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div class="mb10">请选择是关联已有的多渠道配送订单，还是创建多渠道配送订单？</div>
      <div class="tip" v-if="isMulOrder">提示:该订单是多品订单，是否需要拆单之后再进行多渠道配送？<span class="highlight split-order" @click="toOpenOrder">去拆分订单>></span></div>
      <div class="footer-btn mt10">
        <a-button class="gray-outline" @click="show('1')" v-if="$authPass('oms.order.mulitChannel.bind')">关联多渠道配送单</a-button>
        <a-button type="primary" style="margin-left: 10px" @click="show('2')" v-if="$authPass('oms.order.mulitChannel.create')">创建多渠道配送单</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    props: ['isMulOrder'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const handleCancel = () => {
        visible.value = false
      }
      const show = (type: string) => {
        visible.value = false
        emit('show', type)
      }

      const toOpenOrder = () => {
        visible.value = false
        emit('openOrder')
      }

      return {
        visible,
        handleCancel,
        show,
        toOpenOrder,
      }
    },
  })
</script>

<style lang="less" scoped>
  .tip {
    color: #7f7f7f;
    // margin: 10px 0;
  }

  .split-order {
    user-select: none;
    cursor: pointer;
  }

  .footer-btn {
    width: 100%;
    text-align: center;
  }
</style>
